'use strict';
var React = require('react');
var HomeProductContent = require('./HkfsHomeProductTable/HomeProductContent.jsx');
var ReSeachBox = require('./ReSeachBox.jsx');
var Pager = require('./pager.jsx');
var actions = require('../../actions/products');
class HkfsRaiseFundsTable extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.searchFonds = this.searchFonds.bind(this);
        this.changePage = this.changePage.bind(this);
        this.changeFondType = this.changeFondType.bind(this);
        this.getActiveClass = this.getActiveClass.bind(this);
        this.titleClickOfSingle=this.titleClickOfSingle.bind(this);
        this.titleClickOfDouble=this.titleClickOfDouble.bind(this);
        this.changeOrderTypeAndSubmit=this.changeOrderTypeAndSubmit.bind(this);

        this.state = {
            fundType: -1,
            orderByType: 1,
            fundCode: '',
            currentPage: 1
        }
    }

    //输入值改变
    handleChange(event) {
        //直接调用setSate会导致当前的setState和组件渲染过程处于同一个事务中，导致state没有即时渲染，详见https://zhuanlan.zhihu.com/p/20328570
        setTimeout(((e)=> {
            this.setState({
                fundCode: e.target.value
            });
        })(event), 0);
    }

    //获取当前缓存参数查询
    searchFonds() {
        this.changePage(this.state.currentPage);
    }


    //切换基金类型
    changeFondType(type) {
        //直接调用setSate会导致当前的setState和组件渲染过程处于同一个事务中，导致state没有即时渲染，详见https://zhuanlan.zhihu.com/p/20328570
        setTimeout(()=> {
            this.setState({
                fundType: type
            });
            this.changePage(this.state.currentPage);
        }, 0);
    }

    //换页
    changePage(current) {
        let dispatch = this.props.gobalDispatch;
        dispatch(actions.getFundsList(current, 10, this.state.fundType, this.state.orderByType, this.state.fundCode));
        this.setState({
            currentPage: current
        });
    }

    //获取a标签class
    getActiveClass(type) {
        if (type == this.state.fundType) {
            return "active";
        }
        else {
            return "normal";
        }
    }

    //改变排序参数并且提交
    changeOrderTypeAndSubmit(orderByType){
        setTimeout(()=> {
            this.setState({
                orderByType:orderByType
            });
            this.changePage(this.state.currentPage);
        },0);

    }

    titleClickOfSingle(num){
        var orderDictionary={
            1:1,
            2:3
        };
        this.changeOrderTypeAndSubmit(orderDictionary[num]);
    }
    titleClickOfDouble(num){
        var orderDictionary={
            1:2,
            2:4
        };
        this.changeOrderTypeAndSubmit(orderDictionary[num]);
    }

    render() {
        let titleTypes = ['string', 'order', 'order', 'string', 'string', 'string', 'string', 'string'];
        return <div className="HkfsRaiseFundsTable">
            <div className="ReSeachBoxDiv"><ReSeachBox rePlaceHolder="请输入基金代码或名称" reTextChange={this.handleChange}
                                                       reClick={this.searchFonds}></ReSeachBox></div>
            <div className="HkfsFondTypeList"><a className={this.getActiveClass(-1)}
                                                 onClick={this.changeFondType.bind(this,-1)}>全部</a><a
                className={this.getActiveClass(1)} onClick={this.changeFondType.bind(this,1)}>股票型</a><a
                className={this.getActiveClass(2)} onClick={this.changeFondType.bind(this,2)}>债券型</a><a
                className={this.getActiveClass(3)} onClick={this.changeFondType.bind(this,3)}>混合型</a><a
                className={this.getActiveClass(4)} onClick={this.changeFondType.bind(this,4)}>货币型</a><a
                className={this.getActiveClass(5)} onClick={this.changeFondType.bind(this,5)}>保本型</a><a
                className={this.getActiveClass(6)} onClick={this.changeFondType.bind(this,6)}>指数型</a><a
                className={this.getActiveClass(7)} onClick={this.changeFondType.bind(this,7)}>QDII</a><a
                className={this.getActiveClass(8)} onClick={this.changeFondType.bind(this,8)}>商品型</a></div>
            <HomeProductContent reClass="HkfsRaiseFunds" titleTypes={titleTypes} 
                                data={this.props.data} widthArray={this.props.widthArray} title={this.props.title}
                                itemTypes={this.props.itemTypes}
                                buttonText={this.props.buttonText}
                                clickOfSingle={this.titleClickOfSingle}
                                clickOfDouble={this.titleClickOfDouble}
                                itemHref={this.props.itemHref}
                                showTips={this.props.showTips}></HomeProductContent>
            <div className="PagerDiv">
                <Pager page={this.props.page} totalPage={this.props.totalPage} onChangePage={this.changePage}/>
            </div>
        </div>
    }
}
module.exports = HkfsRaiseFundsTable;